<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <style>
        .layui-form-label{
            width: 130px;
        }
        .layui-input-block{
            margin-left: 160px;
        }
        .scroll-body{
            max-height: 300px!important;
        }
    </style>
</head>
<body>
<form class="layui-form" action="" style="padding-right: 30px">
    <input type="hidden" name="id" value="${bean.id!}">
    <div class="main-container">
        <div class="layui-form-item">
            <div class="layui-col-xs12">
                <label class="layui-form-label required">监控设备</label>
                <div class="layui-input-block">
                    <div id="cameraNum" class="xm-select-demo"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-xs12">
                <label class="layui-form-label required">计划开始时间</label>
                <div class="layui-input-block">
                    <input type="text" name="begin" id="begin" lay-verify="datetime" placeholder="请选择"  autocomplete="off"
                           class="layui-input" value="${bean.begin!}">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-xs12">
                <label class="layui-form-label required">计划结束时间</label>
                <div class="layui-input-block">
                    <input type="text" name="end" id="end" lay-verify="datetime" placeholder="请选择"  autocomplete="off"
                           class="layui-input" value="${bean.end!}">
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                        lay-filter="bean-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm" lay-filter="close">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../component/layui/xm-select.js"></script>
<script>
    layui.use(['form', 'jquery','select','laydate'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let select = layui.select;
        let laydate = layui.laydate;
        let VIEW_PATH = "${ctxPath}/camera/plan/view/";
        let DATA_PATH = "${ctxPath}/camera/plan/data/";

        var xmSel;
        $.ajax({
            url: '${ctxPath}/dict/loadCamera',
            type: 'get',
            dataType: 'json',
            async: true,
            contentType: 'application/json',
            success:function (res){
                var flag=false;
                if ('${bean.camera_num!}'!=undefined && '${bean.camera_num!}'!=''){
                    flag=true;
                }
                xmSel=xmSelect.render({
                    el: '#cameraNum',
                    paging: true,
                    pageSize: 5,
                    filterable: true,
                    toolbar: {
                      show: true,
                      list: ['ALL','CLEAR','REVERSE']
                    },
                    disabled: flag,
                    initValue: ['${bean.camera_num!}'],
                    layVerify: 'required',
                    model: {
                        label: {
                            type: 'block',
                            block: {
                                //最大显示数量, 0:不限制
                                showCount: 2,
                                //是否显示删除图标
                                showIcon: true,
                            }
                        }
                    },
                    pageEmptyShow: false,
                    data: res.data
                })
            },error:function (){
                layer.msg("系统异常，请刷新页面", {icon: 2, time: 1000});
            }
        })

        laydate.render({
            elem: '#begin',
            type: 'datetime',
            position: 'fixed'
        });
        laydate.render({
            elem: '#end',
            type: 'datetime'
        });

        form.on('submit(bean-save)', function (data) {
            $.ajax({
                url: DATA_PATH + 'saveOrUpdate',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg("操作成功", {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("bean-table");
                        });
                    } else {
                        layer.msg("操作失败", {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });
    })
</script>
<script>
</script>
</body>
</html>